<template>
	<view class="page">
		<view class="user-black" v-if="balckShow" :style="{opacity:balckOpacity?'1':'0'}">
			<view :style="{height:statusBarHeight+'px'}"></view>
			<view class="f user-black-box">
				<view class="user-black-left" @click="backBtn">
					<image src="/static/icon/black1.png" mode="" class="blackLeftImg"></image>
				</view>
				<view class="user-black-cont">卧槽无情的电影</view>
				<view class="user-black-follow">
					<!-- #ifdef APP-PLUS -->
					<view class="f user-black-follow-btn">关注</view>
					<!-- #endif -->
				</view>
			</view>
		</view>
		<!-- 头部背景图 -->
		<view class="header">
			<image src="/static/icon/touxiang.jpg" mode="widthFix" class="header-bg"></image>
			<view class="header-layer f"></view>
		</view>
		<image src="/static/icon/black.png" mode="" class="blackImg" :style="{top:(statusBarHeight + 10)+'px'}" @click="backBtn"></image>
		<view class="userBox">
			<view class="user-top f">
				<view class="user-avatar f">
					<image src="/static/icon/touxiang.jpg" mode="" class="avatar-image"></image>
				</view>
				<view class="user-item">
					<view><text class="user-title">获赞</text></view>
					<view class="mg-t1"><text class="user-num">1059.1w</text></view>
				</view>
				<view class="user-silder"></view>
				<view class="user-item">
					<text class="user-title">关注</text>
					<view class="mg-t1"><text class="user-num">59.1w</text></view>
				</view>
				<view class="user-silder"></view>
				<view class="user-item">
					<text class="user-title">粉丝</text>
					<view class="mg-t1"><text class="user-num">59.1w</text></view>
				</view>
			</view>
			<view class="user-news">
				<view><text class="user-name">卧槽无情</text></view>
				<view class="mg-t1"><text class="user-code">号：123456123456</text></view>
			</view>
			<view class="user-occupy"></view>
			<view class="user-cont">
				<view>
					<text class="user-cont-size">卧槽无情卧槽无情卧槽无情卧槽无情卧槽无情卧槽无情卧槽无情卧槽无情</text>
				</view>
			</view>
			<view class="user-follow f">
				<text class="user-follow-text">关注</text>
			</view>
		</view>
		<view class="user-navtab" :style="{top:(statusBarHeight + 40)+'px'}">
			<view class="user-nav f">
				<view class="user-nav-item f" :class="[navType == 0?'active-nav-view':'']" @click="changeNav(0)">作品</view>
				<view class="user-nav-item f" :class="[navType == 1?'active-nav-view':'']" @click="changeNav(1)">喜欢</view>
			</view>
		</view>
		<view class="user-flotter">
			<view :style="'position: fixed;width: 100%;height: '+listTwoHeight+'px;background-color: #FFFFFF;'" v-if="loadShow">
				<!-- loading加载动画 -->
				<loadingt></loadingt>
			</view>
			<!-- 作品 -->
			<view v-if="navType == 0">
				<view class="user-works f">
					<view class="user-works-item" :id="item.vid" :ref="item.vid" v-for="(item,index) in vodImgList" :key="item.index" @click="videoSee(index)">
						<image :src="item.coverImg" mode="aspectFill" class="user-works-img"></image>
					</view>
				</view>
				<uniloadmore :status="status" v-if="!loadShow"></uniloadmore>
			</view>
			<!-- 喜欢 -->
			<view v-if="navType == 1">
				<view class="f user-like">
					<view class="user-like-image f"><image src="/static/icon/lock.png" mode="aspectFill" class="likeImg"></image></view>
					<view class="user-like-title">喜欢的内容不可见</view>
					<view class="user-like-text">该用户已将喜欢列表设为私密</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const deviceInfo = uni.getSystemInfoSync()
	// console.log(deviceInfo)
	import uniloadmore from '@/components/tsp-video/tsp-load/tsp-load-more.vue'
	import loadingt from '@/components/tsp-video/tsp-load/tsp-loading.vue'
	import { getVodData } from '@/static/js/vodData.js'
	export default{
		components:{
			loadingt,
			uniloadmore
		},
		data(){
			return {
				statusBarHeight:deviceInfo.statusBarHeight,
				listTwoHeight:deviceInfo.screenHeight / 2.3,
				balckShow:false, //是否显示标题导航
				balckOpacity:false,
				navType:0,
				loadShow:false,
				pageNum:1,
				vodImgList:[],
				status:'loading',
				videoData: []
			}
		},
		onLoad() {
			this.videoData = getVodData()
			/* 加延迟，不能一进入页面就显示动画，会造成卡顿 */
			setTimeout(()=>{
				this.initVod()
			},100)
		},
		onPageScroll(e) {
			this.balckShow = e.scrollTop >= 5 ? true : false
			this.balckOpacity = e.scrollTop >= 100 ? true : false
		},
		onReachBottom() {
			this.loadingData()
		},
		methods:{
			backBtn(){
				uni.navigateBack()
			},
			changeNav(e){
				this.navType = e;
			},
			startData(){
				let num = this.vodImgList.length; //获取视频数据的长度
				/* 模拟请求 */
				return new Promise((resolve, reject)=>{
					setTimeout(()=>{
						let dataList = JSON.parse(JSON.stringify(this.videoData))
						if(this.pageNum <= 5 ){
							dataList.filter(item=>{
								/** 参数数据自行拼接  */
								item.vodUrl = item.src
								item.coverImg = item.coverImg //视频封面
								item.coverShow = true //是否显示视频封面，vue 小程序端不播放会显示视频，可以不用显示封面，App不播放不会显示视频，就需要封面了
								item.object_fit = item.object_fit //视频的显示类型
								item.sliderShow = true //是否显示进度条
								item.rotateImgShow = true //是否显示旋转头像
								item.fabulousShow = false//是否点赞
								item.followReally = false //是否已经关注
							})
							this.pageNum++
						}else{
							dataList = []
						}
						resolve(dataList)
					},500)
				})
			},
			/* 初始加载 */
			initVod(){
				this.loadShow = true
				if(this.openStart) return
				this.openStart = true;
				this.startData().then((res)=>{
					this.openStart = false
					if(res.length > 0){
						this.vodImgList = res;
					}
					setTimeout(()=>{
						this.loadShow = false
					},100)
				})
			},
			/* 上拉加载 */
			loadingData(){
				console.log(this.pageNum)
				if(this.openStart) return
				this.openStart = true;
				/* 请求分页的数据 */
				this.startData().then((res)=>{
					this.openStart = false
					if(res.length > 0){
						this.vodImgList = this.vodImgList.concat(res); //拼接数据
					}else{
						this.status = "noMore"; //没有更多了
					}
				})
			},
			/* 预览查看视频 */
			videoSee(index){
				uni.navigateTo({
					url:'/pages/details/video-see/video-seev?pageNum=' + this.pageNum
				})
				getApp().globalData.seeVodIndex = index;
				getApp().globalData.seeVodList = this.vodImgList
			}
		}
	}
</script>

<style>
	.f{
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
	}
	.page{
		background-color: #FFFFFF;
		flex: 1;
	}
	.mg-t1{
		margin-top: 10rpx;
	}
	.blackImg{
		width: 70rpx;
		height: 70rpx;
		position: absolute;
		top: 0;
		left: 30rpx;
	}
	.header{
		background-color: #eee;
		height: 350rpx;
		position: relative;
		overflow: hidden;
	}
	.header-bg{
		width: 750rpx;
		height: auto;
	}
	.header-layer{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.2);
	}
	.userBox{
		position: relative;
		background-color: #FFFFFF;
		border-top-right-radius: 30rpx;
		border-top-left-radius: 30rpx;
		margin-top: -50rpx;
	}
	.user-top{
		flex-direction: row;
		align-items: center;
		padding-left: 30rpx;
	}
	.user-avatar{
		width: 150rpx;
		height: 150rpx;
		border-radius: 150rpx;
		align-items: center;
		justify-content: center;
		margin-top: -40rpx;
		background-color: #FFFFFF;
	}
	.avatar-image{
		width: 150rpx;
		height: 150rpx;
		border-radius: 150rpx;
	}
	.user-item{
		width: 175rpx;
		margin-top: 20rpx;
		margin-left: 10rpx;
	}
	.user-title{
		/* #ifndef APP-NVUE */
		display: inline-block;
		width: 175rpx;
		/* #endif */
		text-align: center;
		font-size: 27rpx;
		color: #666;
	}
	.user-silder{
		width: 2rpx;
		height: 75rpx;
		background-color: #E5E5E3;
		position: relative;
		top: 10rpx;
	}
	.user-num{
		/* #ifndef APP-NVUE */
		display: inline-block;
		width: 175rpx;
		/* #endif */
		text-align: center;
		font-size: 35rpx;
		font-weight: bold;
	}
	.user-news{
		margin: 50rpx 0 0 30rpx;
	}
	.user-name{
		font-size: 40rpx;
		font-weight: bold;
	}
	.user-code{
		font-size: 28rpx;
	}
	.user-occupy{
		margin: 20rpx 30rpx;
		height: 1rpx;
		background-color: #E5E5E3;
	}
	.user-cont{
		margin: 0 30rpx;
	}
	.user-cont-size{
		font-size: 30rpx;
	}
	.user-follow{
		margin:30rpx;
		height: 80rpx;
		background-color: #FF2255;
		align-items: center;
		justify-content: center;
		border-radius: 5rpx;
	}
	.user-follow-text{
		font-size: 33rpx;
		color: #FFFFFF;
	}
	.user-navtab{
		height: 105rpx;
		position: -webkit-sticky;
		position: sticky;
		z-index: 100;
		background-color: #FFFFFF;
	}
	.user-nav{
		height: 100rpx;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-color: #E5E5E3;
		flex-direction: row;
	}
	.user-nav-item{
		flex: 1;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-size: 33rpx;
		color: #666;
		border-bottom-width: 2px;
		border-bottom-style: solid;
		border-color: #FFFFFF;
	}
	.active-nav-view{
		border-bottom-width: 2px;
		border-bottom-style: solid;
		border-color: #000;
		font-weight: bold;
		color: #000000;
	}
	.user-works{
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
	}
	.user-works-item{
		width: 248rpx;
		height: 300rpx;
		background-color: #EEEEEE;
		margin: 3rpx 3rpx 0 0;
		overflow: hidden;
	}
	.user-works-img{
		width: 248rpx;
		height: 300rpx;
	}
	.user-flotter{
		min-height: 500rpx;
		position: relative;
	}
	.user-like{
		min-height: 500rpx;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.user-like-image{
		width: 100rpx;
		height: 100rpx;
		background-color: #E5E5E3;
		border-radius: 100rpx;
		align-items: center;
		justify-content: center;
	}
	.likeImg{
		width: 50rpx;
		height: 50rpx;
	}
	.user-like-title{
		margin-top: 30rpx;
		font-size: 35rpx;
		font-weight: bold;
	}
	.user-like-text{
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #666;
	}
	/* 顶部标题栏 */
	.user-black{
		position: fixed;
		background-color: #FFFFFF;
		z-index: 100;
		top: 0;
		left: 0;
		opacity: 0;
		/* transition: all 0.2s linear; */
	}
	.user-black-box{
		height: 100rpx;
		width: 750rpx;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.user-black-left{
		position: relative;
		top: 7rpx;
		width: 50rpx;
		height: 50rpx;
		margin-left: 30rpx;
	}
	.blackLeftImg{
		width: 25rpx;
		height: 40rpx;
	}
	.user-black-cont{
		width: 450rpx;
		text-align: center;
	}
	.user-black-follow{
		width: 100rpx;
		height: 50rpx;
		margin-right: 30rpx;
	}
	.user-black-follow-btn{
		width: 100rpx;
		height: 50rpx;
		background-color: #FF0000;
		color: #FFFFFF;
		font-size: 30rpx;
		border-radius: 5rpx;
		align-items: center;
		justify-content: center;
	}
</style>
